<template>
  <div>
    <a-table
      bordered
      :dataSource="dataSource"
      :columns="columns"
      v-if="dataSource.length > 0"
      :scroll="{ x: 3600 }"
      :expand-column-width="200"
      :pagination="pagination"
      @change="handleTableChange"
    />
    <div v-else style="text-align: center; margin-top: 20px">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, ref, computed, watch, h } from 'vue';
import { getdelHeatFeeApprovaldDetail } from '#/api/core/planAudit';
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const dataSource = ref([]);
const columns = ref([
  {
    title: '住户名称',
    dataIndex: 'holder',
    key: 'holder',
    align: 'center',
  },
  {
    title: '用户地址',
    dataIndex: 'houseAddress',
    key: 'houseAddress',
    align: 'center',
  },
  {
    title: '热力卡号',
    dataIndex: 'alipayConsNo',
    key: 'alipayConsNo',
    align: 'center',
  },
  {
    title: '收费期',
    dataIndex: 'year',
    key: 'year',
    align: 'center',
  },
  {
    title: '收费面积',
    dataIndex: 'feeArea',
    key: 'feeArea',
    align: 'center',
  },
  {
    title: '单价',
    dataIndex: 'price',
    key: 'price',
    align: 'center',
  },
  {
    title: '业务类型',
    dataIndex: 'businessType',
    key: 'businessType',
    align: 'center',
  },
  {
    title: '生成方式',
    dataIndex: 'generationType',
    key: 'generationType',
    align: 'center',
  },
  {
    title: '应收全费金额',
    dataIndex: 'normalReceivable',
    key: 'normalReceivable',
    align: 'center',
  },
  {
    title: '应收基本费金额',
    dataIndex: 'heatWasteReceivable',
    key: 'heatWasteReceivable',
    align: 'center',
  },

  {
    title: '应收减免金额',
    dataIndex: 'receivableDerate', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'receivableDerate', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },
  {
    title: '折扣金额',
    dataIndex: 'totalDiscountMoney', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'totalDiscountMoney', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },
  {
    title: '抹零金额',
    dataIndex: 'zeroAmount', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'zeroAmount', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },
  {
    title: '违约金应收',
    dataIndex: 'lateFeeReceivable', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'lateFeeReceivable', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },
  {
    title: '已收金额',
    dataIndex: 'yjTotal',
    key: 'yjTotal',
    align: 'center',
  },
  {
    title: '实收金额',
    dataIndex: 'realReceiveToal',
    key: 'realReceiveToal',
    align: 'center',
  },

  {
    title: '违约金实收',
    dataIndex: 'lateFeeRealReceive',
    key: 'lateFeeRealReceive',
    align: 'center',
  },
  {
    title: '退款金额',
    dataIndex: 'refundTotal', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'refundTotal', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },
  {
    title: '拖欠热费',
    dataIndex: 'arrearage', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'arrearage', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },
  {
    title: '拖欠滞纳金',
    dataIndex: 'arrearageLateFee', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'arrearageLateFee', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },
  {
    title: '欠费合计',
    dataIndex: 'arrearageTotal', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'arrearageTotal', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
  },

  // {
  //   title: '计量基础费',
  //   dataIndex: 'meterBaseFeeReceivable',
  //   key: 'meterBaseFeeReceivable',
  //   align: 'center',
  // },
  // {
  //   title: '计量用量',
  //   dataIndex: 'active',
  //   key: 'active',
  //   align: 'center',
  // },
  // {
  //   title: '计量单价',
  //   dataIndex: 'price',
  //   key: 'price',
  //   align: 'center',
  // },
  // {
  //   title: '协议金额',
  //   dataIndex: 'active',
  //   key: 'active',
  //   align: 'center',
  // },
  // {
  //   title: '协议比例',
  //   dataIndex: 'active',
  //   key: 'active',
  //   align: 'center',
  // },
  {
    title: '生成应收时间',
    dataIndex: 'bulidYsrfDate',
    key: 'bulidYsrfDate',
    align: 'center',
  },
  {
    title: '修改时间',
    dataIndex: 'operateDate',
    key: 'operateDate',
    align: 'center',
  },
  {
    title: '最后操作人',
    dataIndex: 'operater',
    key: 'operater',
    align: 'center',
  },
]);

// 默认分页
const current = ref(1); // 当前页码
const total = ref(0); // 总条数
const pageSize = ref(10); // 每页条数
// 分页
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));
const handleTableChange = (pag: { current: number; pageSize: number }) => {
  console.log('分页参数', pag);
  current.value = pag.current;
  pageSize.value = pag.pageSize;
  getDetail(); // 获取表格数据
};

const getDetail = async (data) => {
  let res = await getdelHeatFeeApprovaldDetail({
    id: data.id,
    feeIds: data.feeId,
    page: current.value,
    limit: pageSize.value,
  });
  total.value = res.total;
  dataSource.value = res.data;
  console.log(res.data);
  console.log(dataSource.value);
};

watch(
  () => props.data,
  (newVal) => {
    // 调用发请求的方法
    getDetail(newVal);
  },
  {
    immediate: true,
  },
);
</script>

<style scoped></style>
